<div id="home" ng-cloak>
    <div class="row">
        <div class="col-md-4">
            <!-- <span class="hipster img-responsive img-rounded"></span> -->
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span12">
                        <div class="carousel slide" id="carousel-604406">
                            <ol class="carousel-indicators">
                                <li data-slide-to="0" data-target="#carousel-604406" class="active">
                                </li>
                                <li data-slide-to="1" data-target="#carousel-604406">
                                </li>
                                <li data-slide-to="2" data-target="#carousel-604406" >
                                </li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="item">
                                    <img alt="" src="../../../assets/images/hipster.png" height="497" width="347" />
                                    <div class="carousel-caption">
                                        <h4 translate="main.roles.admin.name">
                                            System Admin
                                        </h4>
                                        <p translate="main.roles.admin.description">
                                            System admin can managing users.
                                        </p>
                                    </div>
                                </div>
                                <div class="item">
                                    <img alt="" src="../../../assets/images/hipster.png" />
                                    <div class="carousel-caption">
                                        <h4 translate="main.roles.teacher.name">
                                            Content admin
                                        </h4>
                                        <p  translate="main.roles.teacher.description">
                                            Content admin can manage questions and exams.
                                        </p>
                                    </div>
                                </div>
                                <div class="item active">
                                    <img alt="" src="../../../assets/images/hipster.png" />
                                    <div class="carousel-caption">
                                        <h4 translate="main.roles.student.name">
                                            Student
                                        </h4>
                                        <p translate="main.roles.student.description">
                                            Student can take exam.
                                        </p>
                                    </div>
                                </div>
                            </div> <a data-slide="prev" href="#carousel-604406" class="left carousel-control">‹</a> <a data-slide="next" href="#carousel-604406" class="right carousel-control">›</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span12">
                        <div class="tabbable tabs-right" id="tabs-665376">
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#mainhome" data-toggle="tab" translate="main.nav.home">Home</a>
                                </li>
                                <li>
                                    <a href="#news" data-toggle="tab" translate="main.nav.news">News</a>
                                </li>
                                <li>
                                    <a href="#me" data-toggle="tab" translate="main.nav.me">About Me</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane active" id="mainhome">
                                    <h1 translate="main.title"></h1>

                                    <div ng-switch="isAuthenticated()">
                                        <div class="alert alert-success" ng-switch-when="true"
                                             translate="main.logged.message" translate-values="{username: '{{account.login}}'}">
                                            You are logged in as user "Admin".
                                        </div>
                                        <div class="alert alert-warning" ng-switch-when="false" translate="global.messages.info.authenticated"></div>
                                        <div class="alert alert-warning" ng-switch-when="false" translate="global.messages.info.register"></div>
                                    </div>

                                    <p translate="main.question"></p>

                                    <ul>
                                        <li>
                                            <a target="_blank" translate="main.link.phone"></a>
                                        </li>
                                        <li>
                                            <a target="_blank" translate="main.link.skype"></a>
                                        </li>
                                        <li>
                                            <a target="_blank" translate="main.link.qq"></a>
                                        </li>
                                        <li>
                                            <a translate="main.link.contact"></a>
                                        </li>
                                    </ul>

                                    <p>
                                     <span translate="main.like">If you like it, don't forget to GitHub: </span>&nbsp;
                                     <a href="https://github.com/JustinLiao1314/online_exam_system" target="_blank" translate="main.github">
                                         https://github.com/JustinLiao1314/online_exam_system
                                     </a>
                                     <span class="label label-danger glyphicon glyphicon-star" translate="main.star"></span>
                                     <span class="label label-info glyphicon glyphicon-share" translate="main.share"></span>
                                    </p>
                                </div>

                                <div class="tab-pane" id="news">
                                    <div class="container-fluid">
                                        <div class="row-fluid">
                                            <div class="span12">
                                                <div class="media">
                                                    <a href="#" class="pull-left">
                                                        <img src="../../../swagger-ui/images/language/China.jpg"
                                                        class="media-object" width="44px" height="44px" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">
                                                            <a href="">入侵检测系统</a>
                                                            <span class="pull-right" style="color:green;">
                                                                2015-04-28
                                                            </span>
                                                        </h4>
                                                        入侵检测系统是一种对网络传输进行即时监视，在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row-fluid">
                                            <div class="span12">
                                                <div class="media">
                                                    <a href="#" class="pull-left">
                                                        <img src="../../../swagger-ui/images/language/China.jpg"
                                                        class="media-object" width="44px" height="44px" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">
                                                            <a href="">入侵检测系统</a>
                                                            <span class="pull-right" style="color:green;">
                                                                2015-04-28
                                                            </span>
                                                        </h4>
                                                        入侵检测系统是一种对网络传输进行即时监视，在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row-fluid">
                                            <div class="span12">
                                                <div class="media">
                                                    <a href="#" class="pull-left">
                                                        <img src="../../../swagger-ui/images/language/China.jpg"
                                                        class="media-object" width="44px" height="44px" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">
                                                            <a href="">入侵检测系统</a>
                                                            <span class="pull-right" style="color:green;">
                                                                2015-04-28
                                                            </span>
                                                        </h4>
                                                        入侵检测系统是一种对网络传输进行即时监视，在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row-fluid">
                                            <div class="span12">
                                                <div class="media">
                                                    <a href="#" class="pull-left">
                                                        <img src="../../../swagger-ui/images/language/China.jpg"
                                                        class="media-object" width="44px" height="44px" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">
                                                            <a href="">入侵检测系统</a>
                                                            <span class="pull-right" style="color:green;">
                                                                2015-04-28
                                                            </span>
                                                        </h4>
                                                        入侵检测系统是一种对网络传输进行即时监视，在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row-fluid">
                                            <div class="span12">
                                                <div class="media">
                                                    <a href="#" class="pull-left">
                                                        <img src="../../../swagger-ui/images/language/China.jpg"
                                                        class="media-object" width="44px" height="44px" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">
                                                            <a href="">入侵检测系统</a>
                                                            <span class="pull-right" style="color:green;">
                                                                2015-04-28
                                                            </span>
                                                        </h4>
                                                        入侵检测系统是一种对网络传输进行即时监视，在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row-fluid">
                                            <div class="span12">
                                                <div class="media">
                                                    <a href="#" class="pull-left">
                                                        <img src="../../../swagger-ui/images/language/China.jpg"
                                                        class="media-object" width="44px" height="44px" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">
                                                            <a href="">入侵检测系统</a>
                                                            <span class="pull-right" style="color:green;">
                                                                2015-04-28
                                                            </span>
                                                        </h4>
                                                        入侵检测系统是一种对网络传输进行即时监视，在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row-fluid">
                                            <div class="span12">
                                                <div class="media">
                                                    <a href="#" class="pull-left">
                                                        <img src="../../../swagger-ui/images/language/China.jpg"
                                                        class="media-object" width="44px" height="44px" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">
                                                            <a href="">入侵检测系统</a>
                                                            <span class="pull-right" style="color:green;">
                                                                2015-04-28
                                                            </span>
                                                        </h4>
                                                        入侵检测系统是一种对网络传输进行即时监视，在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row-fluid">
                                            <div class="span12">
                                                <div class="media">
                                                    <a href="#" class="pull-left">
                                                        <img src="../../../swagger-ui/images/language/China.jpg"
                                                        class="media-object" width="44px" height="44px" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">
                                                            <a href="">入侵检测系统</a>
                                                            <span class="pull-right" style="color:green;">
                                                                2015-04-28
                                                            </span>
                                                        </h4>
                                                        入侵检测系统是一种对网络传输进行即时监视，在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row-fluid">
                                            <div class="span12">
                                                <div class="media">
                                                    <a href="#" class="pull-left">
                                                        <img src="../../../swagger-ui/images/language/China.jpg"
                                                        class="media-object" width="44px" height="44px" />
                                                    </a>
                                                    <div class="media-body">
                                                        <h4 class="media-heading">
                                                            <a href="">入侵检测系统</a>
                                                            <span class="pull-right" style="color:green;">
                                                                2015-04-28
                                                            </span>
                                                        </h4>
                                                        入侵检测系统是一种对网络传输进行即时监视，在发现可疑传输时发出警报或者采取主动反应措施的网络安全设备
                                                    </div>
                                                </div>
                                            </div>
                                        </div>



                                    </div>
                                </div>

                                <div id="me" class="tab-pane">
                                    <h4 style="margin-top: 10px;">敬请期待</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
